<template>
  <div style="margin-top: 0.5rem;">
    <!--    &lt;!&ndash; <el-button style="margin-top: 15px;" @click="query">图数据切换，动态更新</el-button> &ndash;&gt;-->
    <!--    <el-autocomplete-->
    <!--      style="width: 500px"-->
    <!--      class="inline-input"-->
    <!--      v-model="input"-->
    <!--      :fetch-suggestions="querySearch"-->
    <!--      placeholder="请输入内容"-->
    <!--      :trigger-on-focus="false"-->
    <!--      @select="handleSelect"-->
    <!--      clearable-->
    <!--    >-->
    <!--      &lt;!&ndash; <el-select-->
    <!--        v-model="mode"-->
    <!--        slot="prepend"-->
    <!--        placeholder="关键字查询"-->
    <!--      >-->
    <!--        <el-option label="关键字查询" value="1"></el-option>-->
    <!--        <el-option label="单实体查询" value="2"></el-option>-->
    <!--        <el-option label="关联查询" value="3"></el-option>-->
    <!--      </el-select> &ndash;&gt;-->
    <!--      <el-button-->
    <!--        slot="append"-->
    <!--        type="success"-->
    <!--        icon="el-icon-search"-->
    <!--        @click="query"-->
    <!--      >搜索</el-button>-->
    <!--    </el-autocomplete>-->
    <el-col :span="50" :style="{'--scrollerWidth': this.scrollerWidth , '--scrollerHeight':this.scrollerHeight}"
            class="numberNode">
      <span class="policyFont">节点数:</span>
      <el-select v-model="nbValue" style="display: inline-block" id="number">
        <el-option
          v-loading.fullscreen.lock="fullscreenLoading"
          v-for="item in nbOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
        </el-option>
      </el-select>
    </el-col>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'gSearch',
  // props: {
  //   isShowPrepend: {
  //     type: Boolean,
  //     default: true
  //   }
  // },
  data() {
    return {
      fullscreenLoading:false,
      input: '',
      mode: '1',
      // 后台请求到的json数据
      data: [],
      results: [],
      nbOptions: [{
        value: 10,
        label: '10'
      },{
        value: 20,
        label: '20'
      }, {
        value: 40,
        label: '40'
      }, {
        value: 60,
        label: '60'
      }, {
        value: 80,
        label: '80'
      }, {
        value: 0,
        label: '所有'
      }],
      nbValue: 10,
      scrollerWidth: 0,
      scrollerHeight: 0,
    }
  },
  watch: {
    nbValue(val, oldval) {
      this.initdata(val)
    },
  },
  mounted() {
    this.initdata()
    this.initCondition()
    this.results = this.loadAll()
    this.$events.$on('resize', () => {
      var position = document.getElementById('svg').getBoundingClientRect();
      this.scrollerWidth = (position.left + 20) + 'px'
      this.scrollerHeight = (position.top + 20) + 'px'
    });
    var position = document.getElementById('svg').getBoundingClientRect();
    this.scrollerWidth = (position.left + 20) + 'px'
    this.scrollerHeight = (position.top + 20) + 'px'
  },
  methods: {
    initdata(nbvalue = 10) {
      this.fullscreenLoading = true
      axios({
        method: 'post',
        url: 'http://39.101.74.24:8081/hugegraph/refresh',
      })
      axios({
        method: 'post',
        url: 'http://39.101.74.24:8081/hugegraph/nodeNumberLimit',
        params: {
          nodeNumber: this.nbValue
        },
      })
        .then((res) => {
          this.data = res.data
          this.fullscreenLoading = false
          this.$emit('getData', this.data)
        })
      this.$events.$on("clearKey",()=>{
        axios({
          method: 'post',
          url: 'http://39.101.74.24:8081/hugegraph/nodeNumberLimit',
          params: {
            nodeNumber: this.nbValue
          },
        })
          .then((res) => {
            this.data = res.data
            this.fullscreenLoading = false
            this.$emit('getData', this.data)
          })
      })
    },
    initCondition(){
      this.$events.$on("change",(kgValue,originalValue, typeValue,yearValue,fullscreenLoading)=>{
        if(kgValue=='无')
          kgValue = ''
        if(originalValue=='无')
          originalValue = ''
        if(typeValue=='无')
          typeValue = ''
        if(yearValue=='无'||yearValue==' ')
          yearValue = ''
        axios({
          method: 'post',
          url: 'http://39.101.74.24:8081/hugegraph/selectByCondition',
          params: {
            type_name: typeValue,
            doc_source: originalValue,
            doc_author: kgValue,
            doc_year:yearValue
          },
        })
          .then((res) => {
            this.data = res.data
            // fullscreenLoading = false
            // this.$events.$emit('setfullscreenLoading',fullscreenLoading)
            this.$emit('getData', this.data)
          })
      })
    },
    querySearch(queryString, cb) {
      var res = this.results
      var results = queryString ? res.filter(this.createFilter(queryString)) : res
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (res) => {
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    // 模拟加载数据
    loadAll() {
      return [
        {value: '浙江鹏顺进出口有限公司', address: '浙江诸暨艮塔路9号银证大厦8楼'},
        {value: '玉环达丰环保设备有限公司', address: '玉环市芦浦镇漩门工业城'},
        {value: '宁波海天精工股份有限公司', address: '宁波市北仑区黄山西路235号'},
        {value: '象山东兴雕刻古董家具有限公司', address: '城西路4号'},
        {value: '绍兴千海进出口有限公司', address: '绍兴袍江启圣路以南与越英路交叉口生产车间'},
        {value: '深圳万测进出口有限公司', address: '深圳'}
      ]
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

<style lang='scss' scoped>
.el-select {
  width: 120px;
  // background-color: #fff;
}

.input-with-select .el-input-group__prepend {
  background-color: #6ecbf3;
}

.numberNode {
  position: absolute;
  text-align: left;
  left: var(--scrollerWidth);
  top: var(--scrollerHeight);
}
</style>
